<html xmlns:th="www.thymeleaf.org" lang="zh-CN">
<head >
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="|${name}详情页|">视频</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        body{
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: black;
        }
        .container{
            position: relative;
            width: 1280px;
            height: 720px;

        }
        .videoP{
            display: flex;
            justify-content: center;
        }
        video{
            width: auto;
            height: 680px;
            object-fit: cover;
            border: 2px outset rgb(211, 211, 211);
        }
        canvas{
            pointer-events: none;
            position: absolute;
            top: 0;
            left: 0;
        }

        .send{
            width: 500px;
            height: 30px;
        }
        .send>input{
            float: left;
            height: 100%;
            width: 440px;
            outline:none;
            padding-left: 1em;
            border-radius: 5px 0 0 5px;
            border: 1px solid rgb(155, 155, 155);
        }
        .send>button{
            float: left;
            height: 100%;
            width: 60px;
            border-radius: 0 5px 5px 0;
            border: none;
            cursor: pointer;
            background-color: rgb(22, 162, 255);
            color: #fff;
            letter-spacing: 3px;
            box-shadow: 1px 1px 1px rgb(75, 75, 75),
            inset 1px 1px 1px  white;
        }
        .send>button:active{
            box-shadow:inset 1px 1px 1px rgb(75, 75, 75),
            1px 1px 1px  white;
        }
        .color{
            position: absolute;
            bottom: 10px;
            right: 460px;
            width: 20px;
            height: 20px;
        }
        .switch{
            position: absolute;
            bottom: 10px;
            right: 890px;
            width: 80px;
            height: 30px;
        }

    </style>
<!--    引入axios库-->
    <script src="/js/axios.min.js"></script>
<!--     引入VUE库 -->
    <script src="/js/vue.min.js"></script>
</head>
<body>
<div id="app" class="container">
<!--    <label th:text="${session.loginedUser}"></label>-->
<!--    todo-->
    <div class="videoP">
        <video id="video" th:src="${path}" controls loop autoplay ></video>
    </div>
    <canvas id="canvas"></canvas>
    <div class="videoP">
        <div class="send">
            <input type="text" value="" maxlength="250" placeholder="快来发条弹幕~">
            <button>发送</button>
        </div>
        <button class="switch" onclick="switchC()">开关弹幕</button>
        <input type="color" class="color" value="#FF0000">
    </div>
    <script>
        var video = () => {var videoTime = document.getElementById("video");};
        var v=new Vue({
            el:"#video",
            data:{
                mdanmu:[],//弹幕信息
                bool:[],//弹幕出现过为0 防止重复发送
                Ttime:"",//用来判断视频播放是否倒退,也是视频此刻的时间
                flag:1,//boolean 加载播放时间时用
                switch:false,//默认弹屏打开
                user:"",
            },
            methods: {getVidDur() {video()},
                getUser(){
                    axios.get("sp-user/cloudvideo/user/getLoginedUser").then(res=>{
                        this.user=res.data.data;
                        console.info(this.user)
                    })
                },
                //获取弹幕
                getdanmu(){
                    let fid=location.search.replace(/\?fid=(\d+)/, "$1");
                    let params=new URLSearchParams();
                    params.append("fid",fid);
                    axios.post("/sp-file/cloudvideo/danmu/queryDanmu",params).then(res=>{
                        this.mdanmu=res.data;
                        this.bool=new Array(this.mdanmu.length);
                        for (let i = 0; i < this.mdanmu.length; i++) {
                            this.bool[i]=1;
                        }
                    })
                },
                //保留数字一位小数
                num(value){
                    return parseFloat(value).toFixed(1);
                },
                //获取cookie值
                getCookie(cname)
                {
                    var name = cname + "=";
                    var ca = document.cookie.split(';');
                    for(var i=0; i<ca.length; i++)
                    {
                        var c = ca[i].trim();
                        if (c.indexOf(name)==0) return c.substring(name.length,c.length);
                    }
                    return "";
                }
            },
            created(){this.getdanmu();
            this.getUser()}
        })
    </script>
</div>
<script>
    const input = document.querySelector("input");
    const btn = document.querySelector("button");
    const color = document.querySelector(".color");
    const canvas = document.querySelector('canvas');
    const ctx = canvas.getContext('2d');

    var nowColor = color.value;
    var time = 3;
    var texts = [];
    canvas.width = 1280;
    canvas.height = 300;

    color.addEventListener('change',()=>{
        nowColor = color.value;
    })
    btn.addEventListener('click',()=>{
        let nowTxt = input.value;
        if(nowTxt!=''){
            input.value = '';

            texts.push({
                txt:nowTxt,
                x:canvas.width,
                y:Math.random()*(canvas.height-16)+16,
                color:nowColor
            })
            //    保存弹幕
            let fid=location.search.replace(/\?fid=(\d+)/, "$1");
            let params=new URLSearchParams();
            params.append("uid",v.user.uid);
            params.append("fid",fid);
            params.append("body",nowTxt);
            params.append("colour",nowColor);
            params.append("time",v.num(v.Ttime-0.1));
            axios.post("/sp-file/cloudvideo/danmu/saveDanmu",params).then(res=>{
                //todo 去掉就行
                console.info("发弹幕")
            });
        //    更新查询出的弹幕
            v.getdanmu();
        }
    })
    input.addEventListener('keydown',e=>{
        if(e.keyCode==13){
            btn.click();
        }
    })
    var switchIc=true;
    //弹屏开关
    function switchC(){
        switchIc=!switchIc;
        if(!switchIc) {
            document.getElementById("canvas").style.display = "none";
        }else {
            document.getElementById("canvas").style.display = "inline";
        }
    }

    function update(){

        ctx.clearRect(0,0,canvas.width,canvas.height);
        var videoTime = document.getElementById("video");

        for(let i=0;i<texts.length;i++){
            if(!videoTime.paused){
                texts[i].x -= 1;
            }

            if(texts[i].x<-3000 ) texts.splice(i,1);
        }
        texts.forEach(item=>{
            ctx.font = "16px Arial";
            ctx.fillStyle = item.color;
            ctx.fillText(item.txt,item.x,item.y);
        })

        //视频开始播放 弹幕填充
        if(videoTime.currentTime>0){
            for (let i = 0; i < v.mdanmu.length; i++) {
                if(v.num(v.mdanmu[i].time)==v.num(videoTime.currentTime) && v.bool[i]==1){
                    ctx.font = "16px Arial";
                    ctx.fillStyle = v.mdanmu[i].colour;
                    ctx.fillText(v.mdanmu[i].body,canvas.width,Math.random()*(canvas.height-16)+16);
                    texts.push({
                        txt:v.mdanmu[i].body,
                        x:canvas.width,
                        y:Math.random()*(canvas.height-16)+16,
                        color:v.mdanmu[i].colour
                    })
                    v.bool[i]=0;
                }
            }
        }
        //如果视频倒退，把bool值设都为1 清空弹幕
        if(v.Ttime>videoTime.currentTime){
            for (let i = 0; i < v.bool.length; i++) {
                v.bool[i]=1;
            }
            for (let i = 0; i < texts.length; i++) {
                texts.pop();
            }
        }

        v.Ttime=videoTime.currentTime;

        //todo key
        let key="play";
        console.info(key)
        let value=videoTime.currentTime;
        //恢复播放记录
        if( v.flag==1){
            videoTime.currentTime=v.getCookie(key);
            v.flag=0;
        }
        //保存当前播放时间
        document.cookie=key+"="+value;

        // console.log(videoTime.duration); //获取视频时长
        // console.log(videoTime.currentTime); //获取视频当前播放时间
        window.requestAnimationFrame(update);

    }
    update();



</script>
</body>
</html>
